<!--
 /**
 * Author: hongChengHao
 * Date: 2022-07-25 20:20
 * Desc: 用户信息页 userInfo
 */
-->
<template>
  <yy-page class="user-info">
    <view class="user-info__content">
      <view class="user-info__header">
        <u-cell-group :border="false">
          <u-cell size="large" title="头像" is-link @click="onAvatar">
            <!-- #ifndef  MP-WEIXIN  -->
            <view slot="value">
              <u-avatar :src="userInfo.headImg"></u-avatar>
            </view>
            <!-- #endif-->
            <!-- #ifdef MP-WEIXIN -->
            <view slot="value">
              <button class="wx-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                <u-avatar :src="userInfo.headImg"></u-avatar>
              </button>
            </view>
            <!-- #endif-->
          </u-cell>

          <u-cell size="large" title="昵称" :value="userInfo.nickName" is-link @click="onNick"></u-cell>
          <u-cell size="large" title="性别" :value="sexName" is-link @click="isShowSex = true"></u-cell>
          <u-cell size="large" title="生日" :value="userInfo.birthday" is-link @click="isShowBirth = true"></u-cell>
        </u-cell-group>
      </view>
      <view class="user-info__footer mt20">
        <u-cell-group :border="false">
          <u-cell size="large" title="观影人信息" @click="toCustomerList" is-link></u-cell>
          <u-cell size="large" title="关联手机号" @click="openDebug" :value="userInfo.bindingMobile"></u-cell>
          <u-cell size="large" title="修改密码" is-link @click="toModifyPwd"></u-cell>
        </u-cell-group>
      </view>
      <view class="user-info__logout" @click="outLogin">退出登录</view>
      <avatar-pop v-if="isShowAvatar" v-model="isShowAvatar" :obj="userInfo" @setMemberData="setMemberData"></avatar-pop>
      <nick-pop v-if="isShowNick" v-model="isShowNick" :obj="userInfo" @setMemberData="setMemberData"></nick-pop>
      <sex-pop v-if="isShowSex" v-model="isShowSex" :obj="userInfo" @setMemberData="setMemberData"></sex-pop>
      <birthday-pop v-if="isShowBirth" v-model="isShowBirth" :obj="userInfo" @setMemberData="setMemberData"></birthday-pop>
    </view>
  </yy-page>
</template>
<script>
  import AvatarPop from './components/AvatarPop.vue'
  import NickPop from './components/NickPop.vue'

  import { toast } from '@/utils/message'
  import SexPop from './components/SexPop.vue'
  import BirthdayPop from './components/BirthdayPop.vue'
  import * as auth from '@/utils/auth'
  import dayjs from 'dayjs'
  import config from '@/config'
  import signUtil from '@/utils/fetch/signUtil.js'
  // import { handleLogout } from '@/utils/auth.ts'
  export default {
    name: 'user-info',
    components: {
      AvatarPop,
      NickPop,
      SexPop,
      BirthdayPop
    },
    data() {
      return {
        userInfo: {},
        isShowAvatar: false,
        isShowNick: false,
        isShowSex: false,
        isShowBirth: false
      }
    },
    onLoad() {
      this.getUserInfo()
    },
    computed: {
      sexName() {
        return this.userInfo.sex === '1' ? '男' : this.userInfo.sex === '2' ? '女' : '未知'
      }
    },
    methods: {
      outLogin() {
        this.$auth.logout().then(() => {
          // this.$auth.handleLogout()
        })
      },
      onAvatar() {
        //  #ifndef MP-WEIXIN
        this.isShowAvatar = true
        //  #endif
      },
      onNick() {
        this.isShowNick = true
      },
      // handleBlur(){

      // },
      getUserInfo() {
        uni.$api.user.userInfo().then((res) => {
          this.userInfo = JSON.parse(JSON.stringify(res))
        })
      },
      setMemberData(data) {
        uni.$api.user
          .setMemberData(data)
          .then(() => {
            this.getUserInfo()
            this.isShowAvatar = false
            this.isShowBirth = false
            this.isShowNick = false
            this.isShowSex = false
            toast('修改成功!')
          })
          .catch((err) => {
            toast(err.data.content)
          })
      },
      toCustomerList() {
        this.$tools.navigateTo('/pagesOrder/chooseViewers/index')
      },
      toModifyPwd() {
        this.$tools.navigateTo('/subPages/modifyPwd/index')
      },
      openDebug() {
        if (!this.count) {
          this.count = 1
        } else {
          this.count++
        }
        console.log('this.count', this.count)
        if (this.count === 10) {
          getApp().globalData.debug = true
        }
      },
      onChooseAvatar(e) {
        const url = e.detail.avatarUrl
        const obj = {}
        console.log(e)
        obj.account = auth.getLocAccount() || config.account || ''
        obj.tokenId = auth.getLocToken() || ''
        obj.deviceType = auth.platform() === 'mp-weixin' ? 'wxxcx' : 'h5'
        obj.requestTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
        const password = auth.getPwd() || config.password
        const verifyInfo = signUtil.getSign(obj, password)
        uni.uploadFile({
          //请求的url接口地址
          url: `${config.host}/api/up/upImg`,
          formData: { ...obj, verifyInfo },
          fileType: 'image', //图片类型
          filePath: url, //哪张图片
          name: 'image', //对应接口的文件名称
          // #ifdef MP-WEIXIN
          header: {
            //请求头
            'Content-Type': 'multipart/form-data'
          },
          // #endif
          success: (res) => {
            //成功的回调
            //一般用于重新获取数据渲染页面
            // this.$emit('setMemberData', {
            //   headImg: JSON.parse(res.data).data.url
            // })
            this.setMemberData({ headImg: JSON.parse(res.data).data.url })
          },
          fail: (err) => {
            //失败的回调
            console.log('err:', err)
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .user-info {
    &__header {
      background: #fff;
    }
    &__footer {
      background: #fff;
    }
    &__logout {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 100upx;
      text-align: center;
      background: #fff;
      color: $red;
      font-size: 32upx;
      line-height: 100upx;
    }
  }
  .wx-btn {
    width: 500rpx;
    background: transparent !important;
    padding: 0;
    margin: 0;
    border: none !important;
    display: flex;
    justify-content: flex-end;
  }
  button::after {
    border: none;
  }
</style>
